<template>
    <div>
       <!--居住地址三级联动选项-->
        <section class="showChose" v-show="showChose" @click="closeAdd()"> </section>
          <section class="address" v-if="industryshow">
              <section class="choose_title">
                  <div class="area" @click="categorySelected()" :class="Category?'':'active'">{{Category?Category:'请选择'}}</div>
                  <div class="area" @click="bigcategorySelected()" :class="BigCategory?'':'active'" v-show="Category">{{BigCategory?BigCategory:'请选择'}}</div>
                  <div class="area" @click="middlecategorySelected()" :class="MiddleCategory?'':'active'" v-show="BigCategory">{{MiddleCategory?MiddleCategory:'请选择'}}</div>
                  <div class="area" @click="smallcategorySelected()" :class="SmallCategory?'':'active'" v-show="MiddleCategory">{{SmallCategory?SmallCategory:'请选择'}}</div>
                  <span class="choose_guanbi clear" @click="closeAdd()"><i class="iconfont icon-cuo fr"></i></span>
              </section>
              <ul>
                  <li class="addList" v-for="(v,k) in infoCategory" @click="getCategoryId(v.id,v.HY_KEY, v.HY_MC, k)" v-show="showCategory" :class="v.selected ? 'active' : ''">{{v.HY_MC}}</li>
                  <li class="addList" v-for="(v,k) in showbigCategoryList" @click="getBigCategoryId(v.id,v.HY_KEY, v.HY_MC, k)" v-show="showBigCategory" :class="v.selected ? 'active' : ''">{{v.HY_MC}}</li>
                  <li class="addList" v-for="(v,k) in showmiddleCategoryList" @click="getMiddleCategoryId(v.id,v.HY_KEY, v.HY_MC, k)" v-show="showMiddleCategory" :class="v.selected ? 'active' : ''">{{v.HY_MC}}</li>
                  <li class="addList" v-for="(v,k) in showsmallCategoryList" @click="getSmallCategoryId(v.id,v.HY_KEY, v.HY_MC, k)" v-show="showSmallCategory" :class="v.selected ? 'active' : ''">{{v.HY_MC}}</li>
              </ul>
          </section>
          <section class="address" v-if="jobshow">
              <section class="choose_title">
                  <div class="area" @click="departSelected()" :class="!showDepart?'':'active'">{{Depart?Depart:'请选择'}}</div>
                  <div class="area" @click="bigdepartSelected()" :class="!showBigDepart?'':'active'" v-show="FirstDepart">{{BigDepart?BigDepart:'请选择'}}</div>
                  <div class="area" @click="middledepartSelected()" :class="!showMiddleDepart?'':'active'" v-show="FBigDepart">{{MiddleDepart?MiddleDepart:'请选择'}}</div>
                  <div class="area" @click="smalldepartSelected()" :class="!showSmallDepart?'':'active'" v-show="FMiddleDepart">{{SmallDepart?SmallDepart:'请选择'}}</div>
                  <span class="choose_guanbi clear" @click="closeAdd()"><i class="iconfont icon-cuo fr"></i></span>
              </section>
              <ul>
                  <li class="addList" v-for="(v,k) in infoDeparSame" @click="getDepartId(v.id,v.id, v.name, k)" v-show="showDepart" :class="v.selected ? 'active' : ''">{{v.name}}</li>
                  <li class="addList" v-for="(v,k) in showbigDepartList" @click="getBigDepartId(v.id,v.id,v.name, k)" v-show="showBigDepart" :class="v.selected ? 'active' : ''">{{v.name}}</li>
                  <li class="addList" v-for="(v,k) in showmiddleDepartList" @click="getMiddleDepartId(v.id,v.id, v.name, k)" v-show="showMiddleDepart" :class="v.selected ? 'active' : ''">{{v.name}}</li>
                  <li class="addList" v-for="(v,k) in showsmallDepartList" @click="getSmallDepartId(v.id,v.id, v.name, k)" v-show="showSmallDepart" :class="v.selected ? 'active' : ''">{{v.name}}</li>
              </ul>
          </section>
       
    </div>
</template>

<script>

export default {
  name: 'myAddress',
  data () {
    return {
      categoryname: '',
      departname: '',
      showChose: true,
      // 行业
      showCategory: true,
      showBigCategory: false,
      showMiddleCategory: false,
      showSmallCategory: false,
      showbigCategoryList: false,
      showmiddleCategoryList: false,
      showsmallCategoryList: false,
      category: 5,
      bigCategory: 3,
      middleCategory: 57,
      smallCategory: 114,
      GetCategoryId: 2,
      Category: false,
      BigCategory: false,
      MiddleCategory: false,
      SmallCategory: false,
      infoCategory: [],  //行业
      // v-for循环判断是否为当前
      selected: false,
      // 部门职位
      showDepart: true,
      showBigDepart: false,
      showMiddleDepart: false,
      showSmallDepart: false,
      showbigDepartList: false,
      showmiddleDepartList: false,
      showsmallDepartList: false,
      depart: 5,
      bigDepart: 3,
      middleDepart: 57,
      smallDepart: 114,
      GetDepartId: 2,
      FirstDepart: false,
      BigDepart: false,
      MiddleDepart: false,
      SmallDepart: false,
      infoDeparSame: [],  //职位
      deId: '',   // 为当前组织架构的id
      cpId: '',   //为当前企业的id
      FBigDepart:false,
      FMiddleDepart:false
    }
  },
  props: ['industryshow', 'jobshow', 'Depart','departIds'],
  mounted() {
    // this.info = area;
      this.cpId = this.$route.query.cp_id;
      this.deId = this.$route.query.deId;
    // 获取行业门类
      this.getIndustryList();
      // 获取职位
      this.getDepartSame(0);    
      
  },
  methods: {
    say(val){
      console.log('demo',val);
      //根据传过来的id 调用接口查看当前的组织架构的级别
      this.$fetch(this.$path + '/index.php/api/company/getDepartInfo/'+val).then((response) => {
            console.log('组织架构信息',response);
            let level = response.data.level;
            switch(level){
              case 1 :
                this.Depart = response.data.depart;

                this.FirstDepart = false;
                this.FBigDepart = false;
                this.FMiddleDepart = false;

                this.showDepart = true;

                this.infoDeparSame = response.data.list;
              break;
              case 2 :
              
              this.Depart = response.data.fdepart;
              this.BigDepart = response.data.depart;

              this.FirstDepart = true;
              this.FBigDepart = false;
              this.FMiddleDepart = false;

              this.showDepart = false;
              this.showBigDepart = true;
              
              this.showbigDepartList = response.data.list;

              break;
              case 3 :
              this.Depart = response.data.tdepart;
              this.BigDepart = response.data.fdepart;
              this.MiddleDepart = response.data.depart;

              this.FirstDepart = true;
              this.FBigDepart = true;
              this.FMiddleDepart = false;

              this.showMiddleDepart = true;
              this.showDepart = false;
              this.showBigDepart = false;

              this.showmiddleDepartList = response.data.list;
              break;
            }
            // if(response.code == 200) {
            //     // this.infoDeparSame = response.data;  
            // }
            
        })
    },
    // 获取行业门类
    getIndustryList (pkey) {
      this.$fetch(this.$path + '/api.php/circle/getIndustryList',{pkey:'0'}).then((response) => {
        console.log('查询行业门类列表-行业门类列表',response);
        if(response.code == 200) {
          this.infoCategory = response.data;
        }
      })
    },
    // 获取职位
    // 组织架构
    getDepartSame(deId) {
        this.$fetch(this.$path + '/index.php/api/company/getDepartChilSame/'+deId+ '/' +this.cpId).then((response) => {
            console.log('组织架构',response);
            if(response.code == 200) {
                this.infoDeparSame = response.data;  
            }
            
        })
    },
    closeAdd() {
      // this.showChose = false;
      this.$emit('done');
    },
    // 行业
    _filter(add,HY_MC,code) {
      let result = [];
      for(let i=0;i<add.length;i++) {
        if(code == add[i].id){
          result = add[i][HY_MC];
        }
      }
      return result;
    },
    // 职位
    job_filter(add,name,code) {
      console.log('add', add);
      let result = [];
      for(let i=0;i<add.length;i++) {
        if(code == add[i].id){
          result = add[i][name];
        }
      }
      return result;
    },
    // 选择行业门类后获取行业大类
    getCategoryId: function(hyId,code,input,index,pkey) {
      this.category = code;
      this.Category = input;
      this.showCategory=false;
      this.showBigCategory=true;
      this.showMiddleCategory = false;
      this.showSmallCategory = false;
      this.showbigCategoryList = this._filter(this.infoCategory,'bigCategory',this.category);
      // 点击选择当前
      this.infoCategory.map( a => a.selected = false );
      this.infoCategory[index].selected = true;

      this.$fetch(this.$path + '/api.php/circle/getIndustryList',{pkey:code}).then((response) => {
        console.log('获取行业大类列表--组件',response);
        if(response.code == 200) {
          this.showbigCategoryList = response.data;
        }
      })
    },
    // 选择部门
    getDepartId: function(deId,code,input,index,pkey) {
      // console.log('选择的一级职位',deId);
      this.depart = code;
      this.Depart = input;
      this.showDepart=false;
      this.BigDepart = '';
      this.FirstDepart = true;
      this.showBigDepart=true;
      this.showMiddleDepart = false;
      this.showSmallDepart = false;
      this.showbigDepartList = this.job_filter(this.infoDeparSame,'bigDepart',this.depart);
      // 点击选择当前
      this.infoDeparSame.map( a => a.selected = false );
      this.infoDeparSame[index].selected = true;
   

      this.$fetch(this.$path + '/index.php/api/company/getDepartChilSame/'+code+ '/' +this.cpId).then((response) => {
        console.log('获取部门下级列表--组件',response);
        if(response.code == 200) {
          this.showbigDepartList = response.data;
          this.FBigDepart = false;
          this.FMiddleDepart = false;
        }
        // 选取行业大类选项之后关闭弹层（一级联动）
        if(this.showbigDepartList == undefined || this.showbigDepartList == '') {
          // this.departname = this.Depart;
          this.$emit('departname',this.Depart); 
          this.$emit('departId',deId); 
          this.FBigDepart = false;
          return;
        } 
      })
    },
    categorySelected: function() {
      // 清除行业二三四级列表
      this.showBigCategory=false;
      this.showMiddleCategory = false;
      this.showSmallCategory = false;
      // 清除行业二三四级选项
      this.BigCategory = false;
      this.MiddleCategory = false;
      this.SmallCategory = false;
      // 选项页面的切换
      this.showCategory = true;
      this.showBigCategory=false;
      this.showMiddleCategory = false;
      this.showSmallCategory = false;
    },
    departSelected: function() {
      // 清除职位二三四级列表
      // this.showBigDepart=false;
      // this.showMiddleDepart = false;
      // this.showSmallDepart = false;
      // 清除职位二三四级选项
      // this.BigDepart = false;
      // this.MiddleDepart = false;
      // this.SmallDepart = false;
      // 选项页面的切换
      this.showDepart = true;
      this.showBigDepart=false;
      this.showMiddleDepart = false;
      this.showSmallDepart = false;
    },
    // 选择行业大类后获取行业中类
    getBigCategoryId: function(hyId,code, input, index) {
      this.bigCategory = code;
      this.BigCategory = input;
      
      this.showCategory=false;
      this.showBigCategory=false;
      this.showMiddleCategory = true;
      this.showSmallCategory = false;
      this.showmiddleCategoryList = this._filter(this.showbigCategoryList,'middleCategory',this.bigCategory);
      // 选择当前添加active
      this.showbigCategoryList.map( a => a.selected = false );
      this.showbigCategoryList[index].selected = true;
      
      this.$fetch(this.$path + '/api.php/circle/getIndustryList',{pkey:code}).then((response) => {
        console.log('获取地行业中类列表--组件',response);
        
        if(response.code == 200) {
          this.showmiddleCategoryList = response.data;
        }
        // 选取行业大类选项之后关闭弹层（二级联动）
        if(this.showmiddleCategoryList == undefined || this.showmiddleCategoryList == '') {
          this.categoryname = this.BigCategory;
          this.$emit('categoryname',this.categoryname); 
          this.$emit('categoryId',hyId); 
          return;
        } 
      })
    },
    // 选择行业大类后获取行业中类
    getBigDepartId: function(deId,code, input, index) {
      this.bigDepart = code;
      this.BigDepart = input;
      this.FBigDepart = true;
      this.showDepart=false;
      this.showBigDepart=false;
      this.showMiddleDepart = true;
      this.showSmallDepart = false;
      this.showmiddleDepartList = this.job_filter(this.showbigDepartList,'middleDepart',this.bigDepart);
      // 选择当前添加active
      this.showbigDepartList.map( a => a.selected = false );
      this.showbigDepartList[index].selected = true;
      
      this.$fetch(this.$path + '/index.php/api/company/getDepartChilSame/'+code+ '/' +this.cpId).then((response) => {
        console.log('获取地行业中类列表--组件',response);
        
        if(response.code == 200) {
          this.showmiddleDepartList = response.data;
          this.departname = this.BigDepart;
        }
        // 选取行业大类选项之后关闭弹层（二级联动）
        if(this.showmiddleDepartList == undefined || this.showmiddleDepartList == '') {
          // this.departname = this.BigDepart;
          this.$emit('departname',this.BigDepart); 
          this.$emit('departId',deId); 
          this.MiddleDepart = false;
          return;
        } 
      })
    },
    bigcategorySelected: function() {
      this.showCategory = false;
      this.showBigCategory=true;
      this.showMiddleCategory = false;
      this.showSmallCategory = false;
    },
    bigdepartSelected: function() {
      this.showDepart = false;
      this.showBigDepart=true;
      this.showMiddleDepart = false;
      this.showSmallDepart = false;
    },
    // 选择行业中类后获取行业小类
    getMiddleCategoryId: function(hyId,code, input, index) {
      this.middleCategory = code;
      this.MiddleCategory = input;
      this.showCategory=false;
      this.showBigCategory=false;
      this.showMiddleCategory = false;
      this.showSmallCategory = true;
      this.showsmallCategoryList = this._filter(this.showmiddleCategoryList,'SmallCategory',this.middleCategory);
      // 选择当前添加active
      this.showmiddleCategoryList.map( a => a.selected = false );
      this.showmiddleCategoryList[index].selected = true;

      this.$fetch(this.$path + '/api.php/circle/getIndustryList',{pkey:code}).then((response) => {
        console.log('获取行业小类列表--组件',response);
        if(response.code == 200) {
          this.showsmallCategoryList = response.data;
        }
        // 选取行业中类选项之后关闭弹层（三级联动）
        if(this.showsmallCategoryList == '') {
          this.categoryname = this.MiddleCategory;
          this.$emit('categoryname',this.categoryname);  
          this.$emit('categoryId',hyId); 
        }
      })
      
    },
    // 选择职位
    getMiddleDepartId: function(deId,code, input, index) {
      this.middleDepart = code;
      this.MiddleDepart = input;
      this.showDepart=false;
      this.showBigDepart=false;
      this.showMiddleDepart = false;
      this.showSmallDepart = true;
      this.showsmallDepartList = this.job_filter(this.showmiddleDepartList,'SmallDepart',this.middleDepart);
      // 选择当前添加active
      this.showmiddleDepartList.map( a => a.selected = false );
      this.showmiddleDepartList[index].selected = true;

      this.$fetch(this.$path + '/index.php/api/company/getDepartChilSame/'+code+ '/' +this.cpId).then((response) => {
        console.log('获取行业小类列表3--组件',response);
        if(response.code == 200) {
          this.showsmallDepartList = response.data;
        }
        // 选取行业中类选项之后关闭弹层（三级联动）
        if(this.showsmallDepartList == undefined||this.showsmallDepartList == '') {
          // this.departname = this.MiddleDepart;
          this.$emit('departname',this.MiddleDepart);  
          this.$emit('departId',deId); 
          this.SmallDepart = false;
          return;
        }
      })
      
    },
    middlecategorySelected: function() {
      this.showCategory = false;
      this.showBigCategory=false;
      this.showMiddleCategory = true;
      this.showSmallCategory = false;
    },
    middledepartSelected: function() {
      this.showDepart = false;
      this.showBigDepart=false;
      this.showMiddleDepart = true;
      this.showSmallDepart = false;
    },
    //选择行业小类
    getSmallCategoryId: function(hyId,code, input, index) {
      this.smallCategory = code;
      this.SmallCategory = input;
      // 选择当前添加active
      this.showsmallCategoryList.map( a => a.selected = false );
      this.showsmallCategoryList[index].selected = true;
      // 选取行业小类选项之后关闭弹层（四级联动）
      // this.showChose = false;
        // this.categoryname = this.Category + this.BigCategory + this.MiddleCategory + this.SmallCategory;
        this.categoryname = this.SmallCategory;
        this.$emit('categoryname',this.categoryname);  
        this.$emit('categoryId',hyId);   
    },
    //选择职位
    getSmallDepartId: function(deId,code, input, index) {
      console.log('选择的职位Id',deId);
      this.smallDepart = code;
      this.SmallDepart = input;
      // this.showDepart=false;
      // this.showBigDepart=true;
      // this.showMiddleDepart = true;
      // this.showSmallDepart = true;      // 选择当前添加active
      this.showsmallDepartList.map( a => a.selected = false );
      this.showsmallDepartList[index].selected = true;
      // 选取行业小类选项之后关闭弹层（四级联动）
      // this.showChose = false;
        // this.categoryname = this.Category + this.BigCategory + this.MiddleCategory + this.SmallCategory;
        // this.departname = this.SmallDepart;
        this.$emit('departname',this.SmallDepart);  
        this.$emit('departId',deId); 
    },
    smallcategorySelected: function() {
      this.showCategory = false;
      this.showBigCategory=false;
      this.showMiddleCategory = false;
      this.showSmallCategory = false;
    },
    smalldepartSelected: function() {
      this.showDepart = false;
      this.showBigDepart=false;
      this.showMiddleDepart = false;
      this.showSmallDepart = false;
    },
  },
}
</script>

<style>
.myAddress{
  width: 100%;
  background-color: white;
  border-top: 4px solid rgba(245,245,245,1);
  color:#333;
}
.myAddress .cont{
  border-bottom: 1px solid rgba(245,245,245,0.8);
}
.myAddress .cont span{
  display: inline-block;
  font-size: 0.28rem;
  color: #333;
  line-height: 0.88rem;
  margin-left: 0.32rem;
}
.myAddress .cont section{
  float:left;
}
.myAddress .cont p{
  display: inline-block;
  font-size: 0.28rem;
  color: #333333;
  line-height: 0.88rem;
  margin-left: 1rem;
}
.myAddress .cont .pic2{
  float: right;
  width: 0.14rem;
  height: 0.24rem;
  margin: 0.32rem 0.32rem 0.32rem 0;
}
.myAddress .cont p.text{
  margin-left: 0.72rem;
}
.showChose{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:120;
  background:rgba(0,0,0,0.8);
}
.address{
  position:absolute;
  bottom:0;
  left:0;
  z-index:121;
  background:#fff;
  width:100%;
}
.address .choose_title {
    text-align: left;
    height: 1rem; 
    border-bottom: 1px solid #d8d8d8;
}
.title h4{
  display:inline-block;
  margin-left:3.2rem;
  font-size:0.32rem;
  line-height:0.88rem;
  font-weight:normal;
  color:#999;
}
.title span{
  margin:0.42rem 0 0 2.2rem;
  font-size:0.45rem;
  line-height:0.34rem;
  color:#D8D8D8;
}
.area{
  display:inline-block;
  font-size:0.26rem;
  line-height: 1rem;
  vertical-align: top;
  margin-left:0.32rem;
  color:#333;
  width: 1.14rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}
.choose_title .active {
  border-bottom: 0.032rem solid #e50838;
  color: #e50838;
  margin-top: -0.02rem;
}
.addList{
  width:100%;
  padding-left:0.32rem;
  font-size:0.26rem;
  line-height:0.66rem;
  color:#333;
}
.choose_guanbi {
  line-height: 1rem;
}
.choose_guanbi .icon-cuo{
  font-size: 0.26rem;
  color: #999;
  margin-top: -1rem;
  padding: 0 0.4rem;
}
/* 修改的格式 */
.address ul{
  width:100%;
  height:100%;
  max-height: 4.4rem;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  min-height: 5rem;
}
.address .title .active{
  color:#0071B8;
  border-bottom:0.02rem solid #0071B8;
}
.address ul .active{
  color:#0071B8;
}
</style>